<template>
  <div class="adressList">
    <van-nav-bar
      title="我的地址"
      left-text="返回"
      right-text="新建地址"
      left-arrow
      @click-left="$router.back()"
      @click-right="$router.push('/address')"
    />
    <van-swipe-cell v-for="(item, index) in addressList" :key="index">
      <div class="it-ct">
        <van-checkbox v-model="item.isDefault" checked-color="#ee0a24" @change="check(item)"></van-checkbox>
        <section>
          <h6>{{ item.linkMan }} {{ item.mobile }}</h6>
          <p>{{ item.provinceStr }} {{ item.cityStr }} {{ item.address }}</p>
        </section>
        <van-icon name="share" />
      </div>
      <template #right>
        <van-button
          square
          text="删除"
          type="danger"
          class="delete-button"
          @click="del(item)"
        />
      </template>
    </van-swipe-cell>
  </div>
</template>
<script>
import { getAddressList, delectAddress,updateAddress } from "../../api/second/index.js";
import { ref } from "vue";
export default {
  setup(props) {
    const addressList = ref([]);
    const info = () => { // 获取地址列表
      getAddressList({ token: localStorage.getItem("token") }).then((res) => {
        addressList.value = res.data;
      });
    };
    info();
    const del = (val) => {
      // 删除的函数
      delectAddress({ token: localStorage.getItem("token"), id: val.id }).then((res) => {
        if (res.code == 0) {
          info();
        }
      });
    };
    const check = val => { // 选中事件
      //  console.log(val.isDefault);
       updateAddress({token: localStorage.getItem("token"), id: val.id, isDefault: val.isDefault }).then(res => {
          info();
       })
    }
    return {
      addressList,
      del,
      check
    };
  },
};
</script>
<style lang="scss" scoped>
.adressList {
  height: 100%;
  .it-ct {
    display: flex;
    font-size: 16px;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid #ccc;
    section {
      flex: 1;
      display: inline-flex;
      flex-wrap: wrap;
      align-content: space-between;
      height: 50px;
      margin-left: 10px;
      p {
        width: 280px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #999;
        font-size: 14px;
      }
    }
  }
  .van-button {
    height: 100%;
  }
}
</style>
